<template>
  <div class="doc" ref="doc">
    <div @click="lr"><i :class="l==true?'el-icon-arrow-left icon':'el-icon-arrow-right icon'" ref="icon" ></i></div>
    <div class="menu">
      <div v-for="(menu) in item" :key='menu' class="mitem" @click="tab(menu) ">{{menu}}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, reactive, ref, toRefs } from "vue";

export default defineComponent({
  setup() {
    //@ts-ignore
    let { ctx } = getCurrentInstance();
    let l=ref(false)
    let lr = () => {
      l.value=!l.value
      if(l.value){
        ctx.$refs.doc.style.width='110px'
      }else{
        ctx.$refs.doc.style.width='30px'
      }
    };
    let menu=reactive({
        item:['一键禁止','禁止右键','禁止选择','禁止复制','禁止粘贴','禁止剪切','一键恢复','恢复右键','恢复选择','恢复复制','恢复粘贴','恢复剪切']
    })
    let tab=(type:string)=>{
       switch(type){
         case '一键禁止':barrAll();break;
         case '禁止右键':barrmenu();break;
         case '禁止选择':barrselect();break;
         case '禁止复制':barrcopy();break;
         case '禁止粘贴':barrpaste();break;
         case '禁止剪切':barrcut();break;
         case '一键恢复':canAll();break;
         case '恢复右键':canmenu();break;
         case '恢复选择':canselect();break;
         case '恢复复制':cancopy();break;
         case '恢复粘贴':canpaste();break;
         case '恢复剪切':cancut();break;
         default :break;
       }
    }

    function barrAll(){
       barrmenu()
       barrselect()
       barrcopy()
       barrpaste()
       barrcut()
    }
    function barrmenu(node=document.body){
       node.oncontextmenu=(event)=>event.returnValue=false
    }
    function barrselect(node=document.body){
      node.onselectstart=()=>false
    }
    function barrcopy(node=document.body){
      node.oncopy=()=>false
    }
    function barrpaste(node=document.body){
      node.onpaste=()=>false
    }
    function barrcut(node=document.body){
      node.oncut=()=>false
    }
    
    function canAll(){
      cancopy()
      canpaste()
      cancut()
      canmenu()
      canselect()
    }
    function canmenu(node=document.body){
       node.oncontextmenu=(event)=>event.returnValue=true
    }
    function canselect(node=document.body){
      node.onselectstart=()=>true
    }
    function cancopy(node=document.body){
      node.oncopy=()=>true
    }
    function canpaste(node=document.body){
      node.onpaste=()=>true
    }
    function cancut(node=document.body){
      node.oncut=()=>true
    }
    return {
      lr,l,...toRefs(menu) ,tab
    };
  },
});
</script>

<style lang="less" scoped>
.doc {
  position: fixed;
  right: 0;
  top: 30%;
  width: 30px;
  border: 1px solid cyan;
  background-color:rgba(20, 205, 230,0.3);
  transition: 2s;
  .icon{
          color: cyan ;
          font-size: 26px;
      }
  .menu{
      padding: 0px 0 10px 30px;
      .mitem{
          width: 110px;
          height: 22px;
          line-height: 22px;
          padding-left: 5px;
          font-size: 14px;
          border-radius: 3px;
          margin:5px -15px 0px 0 ;
          border: 1px solid rgb(76, 179, 226);
          background-color: rgba(33, 78, 226, 0.8);
          &:hover{
             background-color: rgb(6, 247, 247);
          }
      }
  }
}
@media all and (max-width: 900px){
  .doc {
    opacity:0;
    transition: 1s;
  }
}
@media all and (max-height: 500px){
  .doc {
    opacity:0;
    transition: 1s;
  }
}
</style>